<script setup>
import { ref } from 'vue';
import router from "@/router";
import { updatePwdOne } from "@/api/user/userInfo.js";
import { ElMessage, ElMessageBox } from "element-plus";
 
const password = ref('')

//修改密码模型数据
const pwdModel = ref({
  old_pwd: "",
  new_pwd: "",
  re_pwd: "",
});

//确认密码校验
const rePasswordValid = (rule, value, callback) => {
  if (value == null || value === "") {
    return callback(new Error("请再次确认密码"));
  } else if (pwdModel.value.new_pwd !== value) {
    return callback(new Error("两次输入密码不一致"));
  } else {
    callback();
  }
};
const rulesPwd = {
  old_pwd: [
    { required: true, message: "请输入当前密码", trigger: "blur" },
    { min: 5, max: 16, message: "密码长度必须为5~16位", trigger: "blur" },
  ],
  new_pwd: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 5, max: 16, message: "密码长度必须为5~16位", trigger: "blur" },
  ],
  re_pwd: [
    { required: true, message: "请再次输入新密码", trigger: "blur" },
    { validator: rePasswordValid, trigger: "blur" },
  ],
};
//密码表单校验
const formRef = ref(null);
//提交进行数据校验，校验通过后才执行调用修改密码的方法
const updatePwd = (state) => {
  formRef.value.validate((valid) => {
    if (valid) {
      submitUpdatePwd();     
    } else {
    pwdModel.value={}
      return false;
    }
  });
};

//表单校验通过，调用修改密码的方法
const submitUpdatePwd = async () => {
  let result = await updatePwdOne(pwdModel.value);
  //console.log(result)
  if (result.data == 200) {
    ElMessage.success(result.message ? result.message : '修改成功')
    router.push("/Login")
  }else if (result.data == 500) {
    ElMessage.error(result.message ? result.message : '请输入正确密码')
    pwdModel.value={}
  }else if (result.data == 600) {
    ElMessage.error(result.message ? result.message : '新密码不能与密码原相同')
    pwdModel.value={}
  }else{
    ElMessage.error("请刷新重试")
  }
}
</script>

<template>
    <div id="userSafe" class="userSafe">
        <div class="left">
            <div class="category1"><router-link to="/user/UserInfo">个人信息</router-link></div>
            <div class="category2"><router-link to="/user/UserSafe">修改密码</router-link> </div>
        </div>
        <div class="right">
            <div class="formInfo">
                    <el-form ref="formRef" :model="pwdModel" :rules="rulesPwd">
                        <el-form-item prop="old_pwd">
                        原密码：<el-input style="width: 300px" v-model="pwdModel.old_pwd" type="password" show-password/>
                        </el-form-item>
                        <el-form-item prop="new_pwd" >
                        新密码：<el-input style="width: 300px" v-model="pwdModel.new_pwd" type="password" show-password/>
                        </el-form-item>
                        <el-form-item prop="re_pwd" style="margin-left: -30px">
                        确认新密码：<el-input style="width: 300px" v-model="pwdModel.re_pwd" type="password" show-password/>
                        </el-form-item>
                    </el-form>
                <el-button type="primary" @click="updatePwd"> 提交修改 </el-button>
            </div>
            <div class="prompt">
                <p class="promptH">登陆密码</p>
                <p class="promptC">请注意保护隐私，勿泄露密码</p>                 
            </div>
        </div>
    </div>
   
</template>

<style lang="scss" scoped>
body{
    background-color: rgba(243, 242, 242, 0.486);
}
.userSafe{
    display: flex;
    .left{
        background: white;
        width:280px;
        margin-left: 180px;
        margin-top: 30px;
        div{
            width:210px;
            height: 45px;
            margin:10px 0 ;
            line-height: 45px;
            text-indent: 2em;
            a{
                color: black;
                text-decoration: none;
            }
        }
        div:hover{
            color: rgb(64, 158, 255);
            cursor: pointer;
            border-left: rgb(64, 158, 255) solid 2px;
        }
    }
    .right{
        width: 1100px;
        height: 800px;
        margin-left: 15px;
        margin-top: 30px;
        background-color: white;
        display: flex;
        flex-direction: row;
        .formInfo{
            width: 800px;
            height: 800px;
            margin-left: 50px;
        }
        .prompt{
            padding: 50px 40px;
            width: 220px;
            height: 700px;
            background: rgba(197, 196, 196, 0.075);
            .promptC{
                font-size: 14px;
                color: rgb(126, 125, 125);
                margin-bottom: 30px;
            }
            .other{
                border-top: solid 1px rgba(0, 0, 0, 0.233);
                .promptH{
                    margin-top: 30px;
                }
                span{
                    display: inline-block;
                    color:rgb(64, 158, 255);
                    text-indent: 2em;
                    cursor: pointer;
                }
            }
        }
    }
}    
</style>